<template>
  <div class="designer-main re-main">
    <header-bar></header-bar>
    <div class="chart-full" style="display: flex; height: calc(100% - 64px); overflow-y: hidden">
      <div class="left-panel">
        <div class="content-bar">
          <div class="dim-label mrs">分类</div>
          <div>
            <Select v-model="schemaId" size="small" style="width: 150px" @on-change="chooseMenu">
              <Option v-for="attr in menuList" :key="attr.id" :value="attr.id">{{ attr.name }}</Option>
            </Select>
          </div>
        </div>
        <!-- jdbc表结构树 -->
        <tree-explore
          :schemaId="schemaId"
          :metaStoreObj="metaStoreObj"
          v-on:select-tree-node="selectTreeNode"
          ref="treeExploreRef"
        ></tree-explore>
      </div>

      <!-- 中央区域 -->
      <div class="edit-center-main">
        <!--维度已选区域-->
        <div class="content-bar">
          <div class="dim-label mrs">
            <a @click="refreshDemoView()">刷新预览</a>
          </div>
        </div>

        <div style="display: flex; height: calc(100% - 48px)">
          <!-- 配置项 -->
          <form-common
            :curNode="curNode"
            :attachPoint="attachPoint"
            :cfgList="cfgList"
            v-on:change-dyn-form="changeDynForm"
            ref="formCommonRef"
          ></form-common>

          <div style="width: calc(100% - 220px); display: flex">
            <div v-if="cfgReady" class="chart-full align-center">
              <div class="edit-chart-main align-center" style="overflow-y: auto; align-items: start">
                <component
                  :is="componentId"
                  :typeCfg="metaStoreObj"
                  :comInst="'aaa'"
                  ref="panelItemRef"
                  class="chart-inner"
                ></component>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderBar from '../components/HeaderBar';
import TreeExplore from '../designer-main/TreeExplore';
import FormCommon from '../designer-main/FormCommon';
import FormFunc from '../designer-main/common/FormFunc';
import DynamicObjectConst from '../designer-main/DynamicObjectConst';

import DemoData from './common/demo-data.json';
import FeatureLoader from './FeatureLoader';
import SchemaConst from '../designer-main/common/SchemaConst';

export default {
  name: 'ComDemo',
  components: {
    HeaderBar,

    TreeExplore,
    FormCommon,
  },
  data() {
    return {
      componentId: FeatureLoader().comRequireMap['frontcomchart'],

      menuList: FeatureLoader().comRequireSelect,

      schemaId: 'frontcomchart',

      treeData: [],
      curNode: null,

      attachPoint: null,
      cfgList: [],
      metaStoreObj: {
        common: {
          name: null,
          domain: 'AA',
          specificationVersion: '1.0',
          category: null,
        },
      },

      // 为空节点初始化用
      nodeName: null,
      nodeTypeObj: {},

      schemaBlockStr: null,

      cfgReady: false,
      dialogState: false,
    };
  },
  watch: {
    schemaId: function (params) {
      this.componentId = null;
      setTimeout(() => {
        this.componentId = FeatureLoader().comRequireMap[params];
      });
    },
  },
  methods: {
    chooseMenu() {
      const tmpCfg = SchemaConst.getDemoCfg(this.schemaId);
      Object.assign(this.metaStoreObj, tmpCfg);

      this.initTreeData();
      this.initDemoView();
    },
    changeDynForm(pModelKey) {
      this.$refs.treeExploreRef.changeDynForm(pModelKey);
    },
    initTreeData() {
      setTimeout(() => {
        this.$refs.treeExploreRef.initTreeData();
      });
    },
    initDemoView() {
      setTimeout(() => {
        this.cfgReady = true;
        setTimeout(() => {
          this.$refs.panelItemRef && this.$refs.panelItemRef.setData && this.$refs.panelItemRef.setData(DemoData);
        });
      });
    },
    //--------------------------------
    selectTreeNode(tmpNode) {
      this.curNode = tmpNode;

      this.nodeName = tmpNode.nodeName;
      this.attachPoint = tmpNode.attachPoint;
      this.nodeTypeObj = tmpNode.nodeTypeObj;

      this.schemaBlockStr = JSON.stringify(tmpNode.schemaBlock, null, 4);

      const retList = FormFunc.initCfgList(tmpNode);
      DynamicObjectConst.extendCfgList(tmpNode.nodeTypeObj.curSchemaId, retList, this.metaStoreObj);
      this.cfgList = retList;
    },
    //--------------------------------
    refreshDemoView() {
      this.cfgReady = false;
      setTimeout(() => {
        this.cfgReady = true;
        setTimeout(() => {
          this.$refs.panelItemRef && this.$refs.panelItemRef.setData && this.$refs.panelItemRef.setData(DemoData);
        });
      });
    },
  },

  mounted() {
    this.chooseMenu();
  },
};
</script>

<style scoped>
.left-panel {
  border-right: 1px solid rgba(23, 35, 61, 0.1);
}
.preview-panel {
  height: 100%;
}
/* ====== */
.content-bar {
  display: flex;
  padding: 0 16px;
  height: 48px;
  line-height: 48px;
  border-bottom: 1px solid rgba(23, 35, 61, 0.1);
}

/*==================*/

.edit-center-main {
  width: calc(100% - 220px);
  background-color: #f8f8f9;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dim-label {
  font-size: 13px;
  color: rgba(23, 35, 61, 0.75);
  margin-right: 8px;
}

.dim-value {
  margin-right: 16px;
}

.btn-bar {
  padding: 0 16px;
  margin-bottom: 16px;
}

.top-btn {
  width: 40px;
  margin-right: 8px;
}
.last-btn {
  margin-right: 0;
}

/* ===== */
.edit-chart-main {
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  position: relative;

  background-color: #ffffff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}

.chart-inner {
  width: 100%;
  height: 100%;
}
</style>
